/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '../../../styles/variables.scss';
@import '../OpsDashboardColors.scss';

$axis-color: $grey-04;
$bg-color: $grey-08;
$top-panel-height: 50px;
$border-color: $grey-05;
$date-color: $grey-01;
$selected-bucket-outline-color: $yellow-02;
$selected-bucket-fill-color: $grey-04;
$legend-font-color: $grey-02;
$last-24-hours-btn-color: $blue-02;
$chart-subtitle-font-color: $grey-03;

.runs-graph-container {
  background-color: $bg-color;

  .top-panel {
    height: $top-panel-height;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .title-and-subtitle {
      padding-left: 25px;
      width: 170px;

      .title {
        font-size: 18px;
      }

      .subtitle {
        color: $chart-subtitle-font-color;
      }
    }

    .time-picker,
    .display-type {
      display: inline-block;
    }

    .display-picker {
      padding-right: 25px;

      .time-picker {
        margin-right: 25px;

        div {
          border: 1px solid $border-color;
          border-radius: 4px;
          padding: 3px 15px;
          cursor: pointer;
          color: $last-24-hours-btn-color;
          background-color: white;

          &:hover,
          &.active {
            background-color: transparent;
          }

          &.active {
            cursor: not-allowed;
          }
        }
      }

      .display-type {
        .active {
          font-weight: bold;
          text-decoration: underline;
        }
        .separator {
          margin-right: 5px;
          margin-left: 5px;
        }

        .option { cursor: pointer; }
      }
    }
  }

  .graph-container {
    padding: 0 50px;
    position: relative;

    .navigation {
      position: absolute;
      font-size: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;

      &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    .arrow-left { left: 5px; }
    .arrow-right { right: 5px; }
  }

  .axis {
    path,
    line {
      stroke: $axis-color;
    }

    text {
      fill: $axis-color;
    }

    .date-axis-tick {
      fill: $date-color;
      font-weight: bold;
    }
  }

  .delay-path {
    fill: none;
    stroke: $delay;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 1.5;
  }

  .delay-dot {
    fill: $delay;
    stroke: white;
    stroke-width: 2;
  }

  .manual {
    @include setColor($manual);
  }

  .schedule {
    @include setColor($schedule);
  }

  .delay {
    margin-right: 5px;
  }

  .bucket {
    opacity: 0;

    &.selected {
      opacity: 0.5;
      stroke: $selected-bucket-outline-color;
      stroke-width: 2px;
      fill: $selected-bucket-fill-color;
    }
  }

  .pointer {
    cursor: pointer;
  }

  .legend {
    text-anchor: middle;
    font-size: 12px;
    fill: $legend-font-color;
  }

  .axis-date {
    font-size: 13px;
  }

  .axis-last-updated {
    text-anchor: end;
    font-size: 11px;
  }
}

.tooltip {
  .tooltip-inner {
    &.disabled-arrow-tooltip {
      text-align: left;
    }
  }
}
